import React from 'react';
import { Modal, Row, Col } from 'antd';
import ReactMarkdown from 'react-markdown';
import remarkBreaks from 'remark-breaks';

const PreviewModal = (props) => {

    const {
        previewModalVisible, documentRecord, closePreviewModal
    } = props;

    return (
        <div>
            <Modal
                title = "预览文档"
                width={1200}
                height={700}
                footer={null}
                open = {previewModalVisible}
                onCancel = {closePreviewModal}
                closable = {{ 'aria-label': 'Custom Close Button' }}
            >
                <div style={{ padding: "5px 0px 5px 0px" }}>
                    <Row>
                        <Col span={1} style={{ margin: "-5px 0px 0px 0px" }}>摘要</Col>
                        <Col span={23}>
                            <div style={{ height: 250, overflowY: "auto", background: "#9e9e9e1a", padding: "2px 20px 2px 20px" }}>
                                <ReactMarkdown remarkPlugins={[remarkBreaks]}>{documentRecord?.document_summary}</ReactMarkdown>
                            </div>
                        </Col>
                    </Row>
                    <Row style={{ padding: "20px 0px 0px 0px" }}>
                        <Col span={1} style={{ margin: "-5px 0px 0px 0px" }}>文本</Col>
                        <Col span={23}>
                            <div style={{ height: 360, overflowY: "auto", background: "#9e9e9e1a", padding: "2px 20px 2px 20px" }}>
                                <ReactMarkdown remarkPlugins={[remarkBreaks]}>{documentRecord?.document_content}</ReactMarkdown>
                            </div>
                        </Col>
                    </Row>
                </div>
            </Modal>
        </div>
    );
};

export default PreviewModal;
